<template>
  <f7-page>
    <!-- 导航栏 -->
    <qm-currentcy-navbar title="会议室列表" bgColor="#3385FF" color="#fff"></qm-currentcy-navbar>
    <!-- 日期选择 -->
    <f7-block class="date-picker-wrapper">
      <qm-date-appointment></qm-date-appointment>
    </f7-block>
    <!-- 会议室列表 -->
    <f7-block class="meeting-room-list">
      <qm-meeting-room-card v-for="i in 4" :key="i"></qm-meeting-room-card>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: "subscribe-list"
}
</script>

<style lang="less" scoped>
.date-picker-wrapper {
  margin: 0;
  padding: calc(20px * var(--ratio)) 0 calc(48px * var(--ratio)) calc(32px * var(--ratio));
  // height: calc(164px * var(--ratio));
  background-color: var(--color-brand);
}

.meeting-room-list {
  margin: calc(-16px * var(--ratio)) 0 0;
  padding: calc(30px * var(--ratio)) calc(32px * var(--ratio)) 0;
  background-color: #fff;
  border-radius: calc(16px * var(--ratio)) calc(16px * var(--ratio)) 0 0;
}

::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}
</style>